import bg from "@/assets/img/bg.png";
import logo from "@/assets/img/logo@4x.png";
import { useUserStore } from "@/store/userState";
import { Button } from "antd-mobile";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import LoginPage from "./loginPage";
import { Logo } from "./logo";

function Login() {
  // const [visible, setVisible] = useState(false);
  const navigate = useNavigate();
  const { setUser, clearLogin } = useUserStore();
  const [adminLogin, sAdminLogin] = useState<boolean>(false);
  // const login = useLoaderData();

  const touristLogin = () => {
    clearLogin();
    setUser("tourists");
    navigate("/locate");
  };

  return (
    <>
      {adminLogin ? (
        <LoginPage
          goBack={() => {
            sAdminLogin(false);
          }}></LoginPage>
      ) : (
        <div
          style={{ backgroundImage: `url(${bg})` }}
          className='fixed left-0 top-0 bg-no-repeat h-full w-full bg-[#010A23]'>
          <div className='mx-auto fixed inset-x-0 top-32 row-cc'>
            <img src={logo} alt='' className='w-128 h-36 object-contain' />
          </div>
          <div className='fixed inset-x-0 bottom-100 pb-30 col-cc'>
            <Logo></Logo>
            {/* <div className='bg-white w-320 h-48 row-cc rounded-full overflow-hidden px-13 mt-5'>
          <Input placeholder='请输入账号'></Input>
        </div>
        <div className='bg-white w-320 h-48 row-cc rounded-full overflow-hidden px-13 mt-18'>
          <Input
            placeholder='请输入密码'
            type={visible ? "text" : "password"}></Input>
          <div className=''>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        </div> */}
            <div className=' w-320 h-48 row-cc rounded-full overflow-hidden mt-18'>
              <Button
                block
                color='primary'
                shape='rounded'
                size='large'
                onClick={() => sAdminLogin(true)}>
                管理员登录
              </Button>
            </div>
            <div className='w-320 h-50 row-cc rounded-full overflow-hidden py-1 mt-18'>
              <Button
                block
                fill='outline'
                color='primary'
                shape='rounded'
                size='large'
                onClick={touristLogin}>
                游客登陆
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default Login;
